<script setup>
// 用户搜索的字段数据
import {reactive, ref} from "vue";
import {Timer} from "@element-plus/icons-vue";
import {ActiveStuAccount, GetNotActiveStu, GetSearchUser} from "@/api/index.js";
import moment from "moment";
import {ElMessage} from "element-plus";
const tableData = ref();
// 分页
const total = ref(0);
// 赋值数据
let pageSize = ref(5);
let currentPage = ref(1);

const Search_Data = reactive({
  username: null,
  mobile: null,
  email: null,
  type: 0
});
// 获取未激活的用户账号的数据
const handleGetNotActiveStu =async (data)=>{
  try {
    const res = await GetNotActiveStu(data)
    tableData.value = res.results
    total.value = res.count
  } catch (error) {
  }
}
handleGetNotActiveStu({
  page:currentPage.value,
  size:pageSize.value,
})
const handleRemoveSearchData = ()=>{
  for(let i in Search_Data){
    Search_Data[i] = null
  }
  Search_Data.type = 0
}
const handleSearchStuInfo = async (data)=>{
  try {
    const res  = await GetSearchUser({...Search_Data,...data})
    tableData.value = res.results
    total.value = res.count
    handleRemoveSearchData()
  } catch (error) {
    console.log(error);
  }
}
const handleSearchStuInfoBtn = async () => {
  currentPage.value = 1
  await handleSearchStuInfo({
    page: currentPage.value,
    size: pageSize.value,
  })
}
const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleGetNotActiveStu({
    page:val,
    size:pageSize.value,
  })
};

// 定义激活用户初始数据
const activateUserData = reactive({
  user_id: "",
});
const handleEdit = async (row) => {
  activateUserData.user_id = row.id;
  try {
    const res = await ActiveStuAccount(activateUserData)
    if (res.status === 201) {
      ElMessage.success(res.msg)
      tableData.value = tableData.value.filter(item => item.id !== activateUserData.user_id)
    } else {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.log(error);
  }
}

</script>

<template>
  <div class="search">
    <div class="mt-4">
      账号：
      <el-input style="" v-model="Search_Data.username" placeholder="请输入账号进行查询"
                class="input-with-select">
      </el-input>
    </div>
    <div class="mt-4">
      手机：
      <el-input style="" v-model="Search_Data.mobile" placeholder="请输入手机号进行查询"
                class="input-with-select">
      </el-input>
    </div>
    <div class="mt-4">
      邮箱：
      <el-input style="" v-model="Search_Data.email" placeholder="请输入邮箱进行查询"
                class="input-with-select">
      </el-input>
    </div>
    <div class="button">
      <el-button type="primary" @click="handleSearchStuInfoBtn">查询</el-button>
    </div>
  </div>
  <div class="activate_account">
    <el-table :data="tableData" style="width: 1300px">
      <el-table-column label="用户ID" width="180" header-align="center">
        <template #default="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="250" header-align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; margin-left: 20px">
            <el-icon>
              <timer/>
            </el-icon>
            <span style="margin-left: 10px"> {{ moment(scope.row.date_joined).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户账号" width="180" header-align="center">
        <template #default="scope">
          <span style="margin-left: 30%">{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系方式" width="180" header-align="center">
        <template #default="scope">
          <span style="margin-left: 20%">{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="200" header-align="center">
        <template #default="scope">
          <span style="margin-left: 20%">{{ scope.row.email }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" header-align="center">
        <template #default="scope">
          <div style="margin-left: 35%">
            <el-button size="small" @click="handleEdit(scope.row)">激活</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination" v-if="total > 0">
      <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next"
                     :total="total"
                     class="mt-4" :current-page="currentPage"/>
    </div>
  </div>
</template>

<style scoped lang="less">
.search {
  width: 30%;
  margin: auto;
  background: #fff;
  border: 1px solid #e2e2e2;
  box-shadow: 0 8px 30px rgb(0 80 179 / 12%);
  border-radius: 10px;

  .mt-4 {
    margin-bottom: 20px;
    margin-left: 20px;

    .el-input {
      width: 100%;
    }
  }

  .button {
    width: 90%;
    margin-left: 20px;
    padding-bottom: 20px;

    .el-button {
      width: 100%;
    }
  }

  .mt-4:nth-child(1) {
    margin-top: 20px;
  }
}

.activate_account {
  .el-table {
    margin: 50px auto;
  }

  .pagination {
    width: 10px;
    margin: auto;

    .el-pagination {
      margin-left: -100px;
    }
  }

}
.el-dialog .content {
  width: 200px;
  margin: auto;
}

.content .el-button {
  width: 200px;
  margin-top: 10px;
}
</style>